<template>
	<view class="background"></view>
	<view class="head">
		<view class="backAndTitle">
			<view class="back">
				<image src="@/static/public/arrow_left_000000.png" mode="widthFix" @click="goBack"></image>
			</view>
			<view class="title">我的订单</view>
			<view class="placeholder"></view>
		</view>
		<view class="navigation">
			<up-tabs :list="navigation.list" keyName="dictLabel" @click="navigationClick"></up-tabs>
		</view>
	</view>
	<view class="body">
		<view class="quest" v-for="(item,index) in quest.list">
			<view class="type" v-for="(data,index2) in service" @click="togoOrderDetail(item)">
				<span v-if="data.dictValue == item.serviceType">{{data.dictLabel}}</span>
			</view>
			<view class="content">
				<view class="codeAndType" @click="togoOrderDetail(item)">
					<view class="icon">
						<image src="@/static/quest/order/quest.png" mode="widthFix"></image>
					</view>
					<view class="code">
						ID: {{item.id}}
					</view>
					<view class="type">
						<span v-for="(statu,index) in status">
							<span v-if="statu.dictValue == item.questionStatus">{{statu.dictLabel}}</span>
						</span>
					</view>
				</view>
				<view class="textAndPicture" @click="togoOrderDetail(item)">
					<view class="text">{{item.content}}</view>
					<view class="picture" v-if="item.cover.length > 0">
						<up-album :urls="item.cover" multipleSize="213rpx" singleSize="213rpx" space="10rpx"
							radius="31rpx"></up-album>
					</view>
				</view>
				<view class="autonavi" @click="toMap(item)" v-if="item.serviceType == 1">
					<view>
						<image src="@/static/quest/order/orientation.png" mode="widthFix"></image>
					</view>
					<view>{{item.address}}</view>
				</view>
				<view class="button">
					<view class="connection">
						<view>
							联系对方
						</view>
					</view>
					<view class="feature" v-if="navigation.select.dictValue==1&&item.questionStatus==0"
						style="background-color: #E1F9B3;color: #999999;">
						等待审核
					</view>
					<view class="feature" v-if="navigation.select.dictValue==1&&item.questionStatus==1"
						@click="cancel(index)">
						取消任务
					</view>
					<view class="feature" v-if="navigation.select.dictValue==1&&item.questionStatus==3"
						@click="complete(index)">
						任务完成
					</view>

					<view class="feature" v-if="navigation.select.dictValue==2&&item.questionStatus==3"
						style="background-color: #E1F9B3;color: #999999;">
						等待发布者确认完成
					</view>
					<view class="feature" v-if="item.questionStatus==2" @click="process(index)">
						开始任务
					</view>
					<view class="feature" v-if="item.questionStatus==4" @click="clickAftet(index)">
						申请售后
					</view>
					<view class="feature" v-if="item.questionStatus==8"
						style="background-color: #E1F9B3;color: #999999;">
						等待售后审核
					</view>
					<view class="feature" v-if="item.questionStatus==5"
						style="background-color: #E1F9B3;color: #999999;">
						已完成
					</view>
					<view class="feature" v-if="item.questionStatus==7"
						style="background-color: #E1F9B3;color: #999999;">
						已取消
					</view>
				</view>
			</view>
		</view>
		<up-loadmore loadmoreText="加载中" dashed line v-if="(quest.list.length < quest.total)" />
		<up-loadmore loadmoreText="没有更多了" dashed line v-else />
		<view class="after" v-if="after.show">
			<view class="box">
				<view class="tap">备注（选填）：</view>
				<up-input placeholder="请输入内容" border="bottom"></up-input>
				<view class="tap">图片：</view>
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="3"
					width="200rpx" height="200rpx"></u-upload>
				<up-line></up-line>
				<view class="bu">
					<view class="button">
						<up-button text="取消" @click="after.show = false"></up-button>
					</view>
					<view class="button">
						<up-button text="确定" type="primary" @click="afterSale"></up-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import api from '@/utlis/api.js';
	import { DICT_TYPE, dict } from '@/utlis/dict.js';
	import { fileUrl } from '@/utlis/config.js';

	//取消任务
	const cancel = (index) => {
		api("app/user/quest/cancel?questId=" + quest.value.list[index].id, "POST").then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				duration: 2000,
			});

			if (res.code == 200) {
				quest.value.list[index].questionStatus = 7;
			}
		});
	}

	//任务开始执行
	const process = (index) => {
		api("app/user/quest/process?questId=" + quest.value.list[index].id, "POST").then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				duration: 2000,
			});

			if (res.code == 200) {
				quest.value.list[index].questionStatus = 3;
			}
		});
	}

	//任务完成
	const complete = (index) => {
		api("app/user/quest/complete?questId=" + quest.value.list[index].id, "POST").then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				duration: 2000,
			});

			if (res.code == 200) {
				quest.value.list[index].questionStatus = 4;
			}
		});
	}


	const after = ref({
		"id": "",
		"mark": "",
		"show": false
	})
	//售后
	const clickAftet = (index) => {
		after.value.id = index;
		after.value.mark = "";
		after.value.show = true;
	}


	//申请售后
	const afterSale = async () => {
		after.value.show = false;
		let image = [];
		for (let i = 0; i < fileList.value.length; i++) {
			const res = await uploadFile(fileList.value[i].thumb);
			image.push(res.ossId);
		}
		api("app/user/quest/service", "POST", {
			"questId": quest.value.list[after.value.id].id,
			"mark": "1",
			"images":image.join(",")
		}).then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				duration: 2000,
			});
			if (res.code == 200) {
				quest.value.list[after.value.id].questionStatus = 8;
			}
		});
	}

	const navigationClick = (item) => {

		if (item.dictValue != navigation.value.select.dictValue) {
			navigation.value.select = item;
			quest.value.total = 0;
			quest.value.list = [];
			quest.value.pageNum = 1;
			quest.value.pageSize = 5;
			getQuest();
		}
	}
	const quest = ref({
		total: 0,
		list: [],
		pageNum: 1,
		pageSize: 5
	});

	//跳转高德
	const toMap = (item) => {

		uni.openLocation({
			latitude: Number(item.latitude), //维度
			longitude: Number(item.longitude), //经度
			name: item.address
		})
	}

	//任务类型
	const service = ref([]);
	//导航
	const navigation = ref({
		select: {},
		list: []
	});
	//任务状态
	const status = ref([])

	onLoad(() => {
		//加载导航
		dict(DICT_TYPE.ORDER_NAVIGATION).then(data => {
			navigation.value.select = data[0];
			navigation.value.list = data;
			//获取任务
			getQuest();
		});
		//加载任务性质
		dict(DICT_TYPE.SERVICE_TYPE).then(data => {
			service.value = data;
		});
		//任务状态
		dict(DICT_TYPE.QUESTION_STATUS).then(data => {
			status.value = data;
		});
	});

	//页面触底
	onReachBottom(() => {
		if (quest.value.list.length < quest.value.total) {
			getQuest();
		}

	});

	//加载任务
	const getQuest = () => {
		if (navigation.value.select.dictValue == 1) {
			api("app/user/userBase/me/public/question", "GET", {
				pageNum: quest.value.pageNum,
				pageSize: quest.value.pageSize
			}).then(res => {
				quest.value.total = res.total;
				quest.value.pageNum++;
				for (var i = 0; i < res.rows.length; i++) {
					if (res.rows[i].cover != null && res.rows[i].cover != '') {
						res.rows[i].cover = res.rows[i].cover.split(',')
						for (var j = 0; j < res.rows[i].cover.length; j++) {
							res.rows[i].cover[j] = fileUrl + res.rows[i].cover[j];
						}
					} else {
						res.rows[i].cover = [];
					}
				}
				quest.value.list.push(...res.rows);
				console.log(quest.value.list)
			});
		} else {
			api("app/user/userBase/me/accept/question", "GET", {
				pageNum: quest.value.pageNum,
				pageSize: quest.value.pageSize
			}).then(res => {
				quest.value.total = res.total;
				quest.value.pageNum++;
				for (var i = 0; i < res.rows.length; i++) {
					if (res.rows[i].cover != null) {
						res.rows[i].cover = res.rows[i].cover.split(',')
						for (var j = 0; j < res.rows[i].cover.length; j++) {
							res.rows[i].cover[j] = fileUrl + res.rows[i].cover[j];
						}
					} else {
						res.rows[i].cover = [];
					}
				}
				quest.value.list.push(...res.rows);
			});

		}
	}

	//返回
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}


	const togoOrderDetail = (item) => {
		uni.navigateTo({
			url: "/pages/quest/order_detail?navigation=" + JSON.stringify(navigation.value.select) +
				"&quest=" + JSON.stringify(item)
		})
	}

	const fileList = ref([]);
	const afterRead = (event) => {
		fileList.value.push(...event.file);
	}
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	}
</script>

<style lang="scss">
	.background {
		width: 100vw;
		height: 100vh;
		background-color: #F7F7F7;
		z-index: -100;
		position: fixed;
		top: 0;
	}

	.head {
		position: fixed;
		top: 0;
		z-index: 100;
		padding: 85rpx 0 15rpx 0;
		background-color: #FFFFFF;

		.backAndTitle {
			height: 50rpx;
			display: flex;
			flex-wrap: wrap;

			>view {
				width: 250rpx;
			}

			.back {
				padding-left: 20rpx;
				box-sizing: border-box;

				image {
					width: 19rpx;
				}
			}

			.title {
				text-align: center;
				font-size: 36rpx;
				font-weight: 500;
			}
		}
	}

	.body {
		margin-top: 255rpx;
		padding-bottom: 100rpx;

		.quest {
			background-color: #FFFFFF;
			border-radius: 30rpx;
			margin-top: 20rpx;

			>.type {
				width: 125rpx;
				line-height: 51rpx;
				background-color: #D7FAAA;
				border-radius: 30rpx 0 30rpx 0;
				text-align: center;
				font-size: 28rpx;
			}

			.content {
				width: 750rpx;
				padding: 25rpx 20rpx;
				box-sizing: border-box;

				.codeAndType {
					display: flex;
					flex-wrap: wrap;
					line-height: 45rpx;
					font-size: 28rpx;

					.icon {
						width: 45rpx;
						margin-right: 12rpx;

						image {
							width: 45rpx;
						}
					}

					.code {
						width: 443rpx;
					}

					.type {
						width: 210rpx;
						text-align: right;
					}
				}

				.textAndPicture {
					background: #F2F2F2;
					border-radius: 23rpx;
					padding: 24rpx 19rpx;

					.text {
						font-size: 30rpx;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
					}

					.picture {
						margin-top: 11rpx;
					}
				}

				.autonavi {
					margin-top: 10rpx;
					line-height: 84rpx;
					background-image: url("@/static/quest/order/autonavi.png");
					background-size: 100%;
					color: #0090FF;
					text-align: center;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: center;

					image {
						width: 43rpx;
						margin-right: 21rpx;
						vertical-align: -10rpx;
					}
				}

				.button {
					margin-top: 30rpx;
					display: flex;
					flex-wrap: wrap;

					>view {
						box-sizing: border-box;
						width: 325rpx;
						line-height: 68rpx;
						border-radius: 39rpx;
						text-align: center;
						font-size: 26rpx;
					}

					.connection {
						>view {
							width: 100%;
							height: 100%;
							border: 2rpx solid #5A8FFC;
							color: #5A8FFC;
							border-radius: 39rpx;
						}
					}

					.feature {
						background-color: #99E72E;
						font-weight: 500;
						margin-left: 39rpx;
					}
				}
			}
		}

	}

	.after {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		display: flex;
		justify-content: center;

		.box {
			background-color: #FFFFFF;
			width: 700rpx;
			margin: auto;
			border-radius: 30rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.tap {
				font-size: 30rpx;
				color: #818181;
				margin: 20rpx 0;
			}

			.bu {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;

				.button {
					width: 300rpx;
					margin: 0 15rpx;
				}
			}
		}
	}
</style>